<template>
    <!-----添加商品信息----->
  <el-dialog @close="hidden" title="商品信息" :visible.sync="visible">
    <el-form ref="form" :model="form"
             :rules="rules"
             size="mini"
             label-width="10vw">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品条码" prop="barcode">
        <span v-if="changeFlag">{{form.barcode}}</span>
        <el-input v-else v-model="form.barcode"></el-input>
      </el-form-item>
      <el-form-item label="商品类别" prop="kid" :inline="true">
        <el-select v-model="form.kid" placeholder="请选择商品类别">
          <el-option v-for="kind in kinds" :label="kind.kind" :value="kind.kind" :key="kind.id"></el-option>
        </el-select>
        <el-button type="primary" @click="addKind">添加</el-button>
      </el-form-item>
      <el-form-item label="商品单位" prop="uid" :inline="true">
        <el-select v-model="form.uid" placeholder="请选择商品单位">
          <el-option v-for="unit in units" :label="unit.unit" :value="unit.unit" :key="unit.id"></el-option>
        </el-select>
        <el-button type="primary" @click="addUnit">添加</el-button>
      </el-form-item>
      <el-form-item label="规格" prop="specification">
        <el-input v-model="form.specification"></el-input>
      </el-form-item>
      <el-form-item label="厂商" prop="manufacturer">
        <el-input v-model="form.manufacturer"></el-input>
      </el-form-item>
      <el-form-item label="保质期" prop="expiration_date">
        <el-input v-model="form.expiration_date"></el-input>
      </el-form-item>
      <el-form-item label="商品进价" prop="cost">
        <el-input v-model="form.cost"></el-input>
      </el-form-item>
      <el-form-item label="商品售价" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="是否禁用" prop="state">
        <el-tooltip :content="'状态：'+form.state" placement="top">
        <el-switch
          v-model="form.stateBan"
          active-value=1
          inactive-value=0
          @change="changeState"
        ></el-switch>
        </el-tooltip>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <add-kind ref="addKind" @loadKinds="$loadKinds"></add-kind>
    <add-unit ref="addUnit" @loadUnits="loadUnits"></add-unit>
  </el-dialog>
</template>

<script>
    import bus from "../../../bus";
    import AddKind from "./AddKind";
    import AddUnit from "./AddUnit";
    import {Good} from "./models/goods";
    import {loadKinds} from "../../../services/settingService";
    import {addGood} from "../../../services/goodsService";

    export default {
      components: {AddUnit, AddKind},
      props:['dialogFormVisible','hidden','goodInfo','editing'],
      data() {
        return {
          //dialogFormVisible: false,
          changeFlag:false,
          kinds:[],
          units:[],
          visible:this.dialogFormVisible,
          form: this.initForm(),
          rules: {
            name: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
            barcode: [
              { type:'string',required: true, message: '请输入条码', trigger: 'blur' }
            ],
            kid: [
              { type:'string',required: true, message: '请输入类别', trigger: 'blur' }
            ],
            uid: [
              { type:'string',required: true, message: '请输入单位', trigger: 'blur' }
            ],
            specification:[
              { type:'string',required: false, message: '请输入规格', trigger: 'blur' }
            ],
          }
        };
      },
      watch:{
        dialogFormVisible:function (){
          this.visible=this.dialogFormVisible;
        },
        editing:function (){
          this.init();
        }
      },
      mounted() {
        this.$loadKinds()
        this.loadUnits()
        this.init();
      },
      methods: {
        initForm(){
          return {
            ID:'',
            name: '',
            barcode:'',
            kid: '',
            uid: '',
            cost: '',
            price: '',
            specification: '',//规格
            manufacturer:'',//厂家
            expiration_date: '',
            stateBan:0,
            state:[0,0,0,0,0,0,0,0,0]
          };
        },
        cancel(){
          this.resetForm();
          this.hidden();
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        init(){
          //预修改数据绑定
          if(this.goodInfo!=null && this.editing==this._mytype.edit.EDIT){
            this.$loadKinds();
            this.loadUnits();
            this.form=this.goodInfo.good;
            this.changeFlag=true;
          }else {
            this.form=this.initForm();
            this.changeFlag=false;
          }
        },
        resetForm() {
          this.$refs['form'].resetFields();
          this.form.state=[0,0,0,0,0,0,0,0,0];
        },
        addKind(){
          this.$refs.addKind.dialogFormVisible=true
        },
        addUnit(){
          this.$refs.addUnit.dialogFormVisible=true
        },
        $loadKinds(){
          this.kinds=[];
          loadKinds().then(success=>{
            for(var i=0;i<success.length;i++){
              let temp={
                id:'',
                kind:'',
              }
              //移除自增的空白栏
              if(success[i].kind==null){
                continue;
              }
              temp.id=success[i].id;
              temp.kind=success[i].kind;
              this.kinds.push(temp)
            }
          },failed=>{
            this.$message({
              type:'error',
              message:'单位加载失败'
            })
          })
        },
        loadUnits(){
          var _this=this
          _this.units=[]
          this.$axios.get('/units').then(resp => {
            if (resp && resp.status === 200) {
              for(var i=0;i<resp.data.length;i++){
                var temp={
                  id:'',
                  unit:''
                }
                //移除自增的空白栏
                if(resp.data[i].unit==null)
                  continue
                temp.id=resp.data[i].id;
                temp.unit=resp.data[i].unit;
                _this.units.push(temp)
              }
            }
          })
        },
        changeState(){
          this.form.state[0]=1;
        },
        //提交新增商品
        onSubmit() {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              let good=Good.createNew(this.form);
              addGood(good).then(success=>{
                bus.$emit('loadGoods');
                this.$message({
                  type:'success',
                  message:`${this.form.name}添加成功`,
                });
                this.resetForm();
                if(this.editing==this._mytype.edit.EDIT){
                  //this.dialogFormVisible=false;
                  this.hidden();
                }
              },failed=>{
                this.$message({
                  type:'error',
                  message:failed.msg,
                })
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      },
    }
</script>

<style scoped>

</style>
